<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery轮播图插件camRoll Slider|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link href="dist/camroll_slider.css" rel="stylesheet"> 
	<style>
    #my-slider {
      width: 100%;
      height: 404px;
      color: white;
    }

    @media (max-width: 640px) {
      #my-slider .crs-bar-roll-current {
        width: 38px;
        height: 38px;
      }

      #my-slider .crs-bar-roll-item {
        width: 30px;
        height: 30px;
      }
    }
  </style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jQuery轮播图插件camRoll Slider <span>jQuery camRoll Slider Plugin</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201906275710.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<!-- slider -->
	    <div id="my-slider" class="crs-wrap">
	      <div class="crs-screen">
	        <div class="crs-screen-roll">
	          <div class="crs-screen-item" style="background-image: url('images/1.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('images/2.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('images/3.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('images/4.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('images/5.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	          <div class="crs-screen-item" style="background-image: url('images/6.jpg')">
	            <div class="crs-screen-item-content"><h1>Lorem...</h1></div>
	          </div>
	        </div>
	      </div>
	      <div class="crs-bar">
	        <div class="crs-bar-roll-current"></div>
	        <div class="crs-bar-roll-wrap">
	          <div class="crs-bar-roll">
	            <div class="crs-bar-roll-item" style="background-image: url('images/1.jpg')"></div>
	            <div class="crs-bar-roll-item" style="background-image: url('images/2.jpg')"></div>
	            <div class="crs-bar-roll-item" style="background-image: url('images/3.jpg')"></div>
	            <div class="crs-bar-roll-item" style="background-image: url('images/4.jpg')"></div>
	            <div class="crs-bar-roll-item" style="background-image: url('images/5.jpg')"></div>
	            <div class="crs-bar-roll-item" style="background-image: url('images/6.jpg')"></div>
	          </div>
	        </div>
	      </div>
	    </div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201906055678.html">
			  <img src="related/1.jpg" width="300" alt="时尚简洁的js轮播图特效插件"/>
			  <h3>时尚简洁的js轮播图特效插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Layout-Interface/201904255624.html">
			  <img src="related/2.jpg" width="300" alt="jquery的全屏轮播插件jquery-fsscroll"/>
			  <h3>jquery的全屏轮播插件jquery-fsscroll</h3>
			</a>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="dist/camroll_slider.js"></script> 
	<script>
		$("#my-slider").camRollSlider();
	</script>
</body>
</html>